<template>
  <div>
    <el-form
      :inline="true"
      class="demo-form-inline"
      style="margin: 0 auto; width: 90%; padding-top: 20px"
    >
      <el-form-item label="年级:">
        <el-select v-model="firstGrade" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.grade"
            :label="item.grade"
            :value="item.grade"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="班级:">
        <el-select v-model="firstClass" placeholder="请选择">
          <el-option
            v-for="item in firstOption.classes"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="年份:">
        <el-select v-model="firstYear" placeholder="请选择">
          <el-option
            v-for="item in firstOption.years"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="Search">查询</el-button>
      </el-form-item>
    </el-form>

    <div
      style="
        width: 700px;
        margin-left: 160px;
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
      "
    >
      <!--水平居中-->
      <!--width: 800px;margin-left: 220px;margin-right:150px;padding-top:20px;padding-left: 60px-->
      <el-form label-width="80px">
        <el-form-item label="基本情况">
          <el-input
            v-model="form.basic"
            type="textarea"
            readonly
            style="width: 600px"
            :autosize="{ minRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="支部特色">
          <el-input
            v-model="form.specialty"
            type="textarea"
            readonly
            style="width: 600px"
            :autosize="{ minRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="工作创新">
          <el-input
            v-model="form.innovation"
            type="textarea"
            readonly
            style="width: 600px"
            :autosize="{ minRows: 6 }"
          />
        </el-form-item>
        <el-form-item label="目标理想">
          <el-input
            v-model="form.goal"
            type="textarea"
            readonly
            style="width: 600px"
            :autosize="{ minRows: 6 }"
          />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getGradeClassesYears } from '@/api/gradeClassesYears'
import { getIntroduction } from '@/api/part1/introduction'

export default {
  components: {},
  props: [],
  data() {
    return {
      options: [
        {
          grade: 2017,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2017, 2018, 2019, 2020]
        },
        {
          grade: 2018,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2018, 2019, 2020]
        },
        {
          grade: 2019,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2019, 2020]
        },
        {
          grade: 2020,
          classes: [
            '软件工程1班',
            '软件工程2班',
            '软件工程3班',
            '软件工程4班',
            '软件工程5班',
            '软件工程6班',
            '软件工程7班',
            '软件工程8班',
            'Ai',
            '大数据',
            '数字媒体'
          ],
          years: [2020]
        }
      ],
      firstGrade: 2017,
      firstClass: '软件工程1班',
      firstYear: 2020,
      firstOption: {
        grade: 2017,
        classes: [
          '软件工程1班',
          '软件工程2班',
          '软件工程3班',
          '软件工程4班',
          '软件工程5班',
          '软件工程6班',
          '软件工程7班',
          '软件工程8班',
          'Ai',
          '大数据',
          '数字媒体'
        ],
        years: [2017, 2018, 2019, 2020]
      },
      form: {
        basic: '',
        specialty: '',
        innovation: '',
        goal: ''
      }
    }
  },
  computed: {},
  watch: {
    firstGrade: function (val) {
      this.firstOption = this.options.find(function (x) { return x.grade === val })
      this.firstYear = this.firstOption.years[0]
      this.firstClass = this.firstOption.classes[0]
    }
  },
  beforeCreate() { },
  created() {
    // 获取对应年级班级和年份信息
    getGradeClassesYears().then(response => {
      this.options = response.data.options;
      this.firstGrade = this.options[0].grade
      this.Search()
    }).catch(response => {
      console.log(response)
    })
  },
  beforeMount() { },
  mounted() {
    // 初始化first
    this.firstGrade = this.options[0].grade
  },

  beforeUpdate() { },
  updated() { },
  destoried() { },
  methods: {
    Search() { // 查询某年级某班某年的数据
      var temp = this.firstGrade + '级' + this.firstClass + '团支部'
      console.log(temp)
      const data = {
        user: temp,
        year: this.firstYear
      }
      getIntroduction(data).then(response => {
        this.form = response.data
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
    }
  },
  fillter: {}
}

</script>

<style scoped>
/*  在此自动生成 */
</style>

